<template>
  <div class="container">
    <div class="iconBtn leftBtn" @click="handelScroll(240)">
      <el-button size="small">
        <i class="el-icon-arrow-left" style="font-size: 1.6rem;font-weight: bold;color: #999"></i>
      </el-button>
    </div>
    <div class="iconBtn rightBtn" @click="handelScroll(-240)">
      <el-button size="small">
        <i class="el-icon-arrow-right" style="font-size: 1.6rem;font-weight: bold;color: #999"></i>
      </el-button>
    </div>
    <div class="closeTags">
      <el-dropdown placement="bottom-end">
        <el-button size="small">
          <i class="el-icon-circle-close" style="font-size: 1.6rem;color: #999"></i>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="closeTagsAll">关闭所有</el-dropdown-item>
            <el-dropdown-item @click="closeTagsOther">关闭其他</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="tagList" ref="tagListDOM" @DOMMouseScroll="onMouseScoll" @mousewheel="onMouseScroll">
      <div class="scrollTags" ref="scrollTagsDOM" :style="{left: scrollTagsLeft + 'px'}">
        <v-draggable
          v-model="tagList"
          item-key="name"
          tag="transition-group"
          :component-data="{name:'fade'}"
          animation="300"
          :move="moveChange"
          filter=".forbid"
        >
          <template #item="{element}">
            <el-tag
              :ref="el => { if (el) tagsPageOpened[TagList] = el }"
              :data-path="element.path"
              :closable="element.name !== 'Home'"
              @close="onClose(element)"
              :class="['tagItem',element.name === 'Home' ? 'forbid' : '']"
              :effect="tagActive === element.path ? 'dark' : 'plain'"
              disable-transitions
              size="small"
              @click="onTagsChange(element)"
            >
              {{$t(`message.menus.${element.lang}`)}}
            </el-tag>
          </template>
        </v-draggable>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, computed,ref, onBeforeUpdate,watch} from "vue";
import {useStore} from 'vuex'
import {useRouter} from "vue-router";
import {MenuTag} from "@/types/menu";
import VDraggable from "vuedraggable"
export default defineComponent({
  name: "TagList",
  components:{
    VDraggable
  },
  setup(props,context){
    const store = useStore()
    const router = useRouter()
    let tagActive = computed(() => {
      return store.state.app.menuState.defaultActive
    })
    let tagList = computed({
      get:() => {
        return store.state.app.tagList
      },
      set: (value) => {
        store.commit('setTagList', value)
      },
    })
    let tagListDOM = ref(null)
    let scrollTagsDOM = ref(null)
    let tagsPageOpened = ref([])
    let scrollTagsLeft = ref(0)
    const onMouseScroll = (e: any):void => {
      var type = e.type
      let delta = 0
      if(type === 'DOMMouseScroll' || type === 'mousewheel'){
        delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40
      }
      handelScroll(delta)
    }
    //鼠标滚动 - 移动tags
    const handelScroll = (delta: number): void =>{
      // @ts-ignore
      const tagListWidth = tagListDOM.value.offsetWidth
      // @ts-ignore
      const scrollTagsWidth = scrollTagsDOM.value.offsetWidth
      if(delta > 0){
        scrollTagsLeft.value = Math.min(0, scrollTagsLeft.value + delta)
      }else {
        if(tagListWidth < scrollTagsWidth){
          scrollTagsLeft.value = Math.max(scrollTagsLeft.value + delta, tagListWidth - scrollTagsWidth)
        }else {
          scrollTagsLeft.value = 0
        }
      }
    }

    onBeforeUpdate(()=>{
      tagsPageOpened.value = []
    })
    //移动tags
    function moveTags(tag: HTMLElement){
      // @ts-ignore
      const tagListWidth = tagListDOM.value.offsetWidth
      // @ts-ignore
      const scrollTagsWidth = scrollTagsDOM.value.offsetWidth
      if(scrollTagsWidth < tagListWidth){
        scrollTagsLeft.value = 0
      }else if(tag.offsetLeft < -scrollTagsLeft.value){
        //标签在可视区域左侧
        scrollTagsLeft.value = -tag.offsetLeft + 6
      }else if(tag.offsetLeft > -scrollTagsLeft.value && tag.offsetLeft + tag.offsetWidth < -scrollTagsLeft + tagListWidth){
        //标签在可视区域
        scrollTagsLeft.value = Math.min(0, tagListWidth - tag.offsetWidth - tag.offsetLeft - 6)
      }else{
        // 标签在可视区域右侧
        scrollTagsLeft.value = Math.min(0, -(tag.offsetLeft - (tagListWidth - 6 - tag.offsetWidth)))
      }
    }
    const onTagsChange = (item: MenuTag) =>{
      if(tagActive.value === item.path) return
      context.emit('onClickTag',item)
    }
    const onClose = (item: MenuTag) =>{
      context.emit('onCloseTag',item)
    }
    const closeTagsAll = () => {
      if(store.state.app.menuState.defaultActive !== '/home'){
        router.replace({path: '/home'})
      }
      store.commit('removeTagsAll')
    }
    const closeTagsOther = () => {
      store.commit('removeTagsOther')
    }

    //拖拽移动事件
    const moveChange = (e: any) => {
      if (e.relatedContext.element.name == 'Home') return  false
      return true
    }

    watch(tagActive,(newValue, prevValue)=>{
      let tag = tagsPageOpened.value.find((item: HTMLElement)=>{
        // @ts-ignore
        return item.$attrs['data-path'] === newValue
      })
      // @ts-ignore
      if(tag) moveTags(tag.$el)
    })
    return {
      tagList,
      tagActive,
      tagListDOM,
      scrollTagsDOM,
      tagsPageOpened,
      scrollTagsLeft,
      onMouseScroll,
      handelScroll,
      onTagsChange,
      onClose,
      closeTagsAll,
      closeTagsOther,
      moveChange,
    }
  },
})
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 3.6rem;
    line-height: 3.5rem;
    background: #f8f8f8;
    box-shadow: 0px 0 3px 2px rgba(100,100,100,.1) inset;
    position: relative;
    .iconBtn{
      position: absolute;
      top: 0;
      height: 100%;
      width: 3rem;
      z-index: 9;
      background: inherit;
      button{
        padding: 0;
        width: 3rem;
        height: inherit;
        background: inherit;
        border: 0;
      }
      button:hover{
        background: #fff;
        transition: all 0.3s;
      }
    }
    .leftBtn{
      left: 0;
    }
    .rightBtn{
      right: 3.4rem;
    }
    .closeTags{
      position: absolute;
      right: 0;
      top: 0;
      width: 3.4rem;
      box-sizing: border-box;
      height: 100%;
      cursor: pointer;
      z-index: 9;
      button{
        padding: 0;
        width: 3.4rem;
        height: 3.6rem;
      }
    }
    .tagList{
      position: absolute;
      height: 100%;
      left: 3rem;
      right: 6.4rem;
      .scrollTags{
        position: absolute;
        height: 100%;
        line-height: inherit;
        display: inline-block;
        white-space: nowrap;
        overflow: visible;
        transition: all 0.5s ;
        .tagItem{
          margin-left: .6rem;
          cursor: pointer;
        }
      }
    }
  }
</style>
